<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }
        #canvas {
           position: absolute;
           left: 50%;
           top: 50%;
           margin-top: -200px;
           margin-left: -200px;
           border: 1px solid rgb(90, 90, 90);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        // 绘画类
        class Paint {
            constructor() {

            };
            // 画直线
            drawLine(x1, y1, x2, y2, color, width) {
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2,y2);
                ctx.lineWidth = width || 2;
                ctx.strokeStyle = color || '#333';
                ctx.lineCap = 'round';
                ctx.stroke();
                ctx.closePath();
            };
            // 画文字
            drawText(text, x, y, color) {
                ctx.beginPath();
                ctx.font = '20px 微软雅黑';
                ctx.fillStyle = color || '#333';
                ctx.textAlign = 'center';
                ctx.textBaseLine = 'middle';
                ctx.fillText(text, x, y);
            };
            // 画圆形
            drawCircle(x, y, r, startDeg, endDeg, color) {
                ctx.beginPath();
                ctx.arc(x, y, r, startDeg, endDeg);
                ctx.fillStyle = color || 'orange';
                ctx.fill();
                ctx.closePath();
            }

        };
        // 钟表类
        function Clock() { 
            // 定义变量x
            this.w = this.h = 400;
            this.r = 180;
            this.x = this.y = 200;
            // 指针长度
            this.r_hour = 60;
            this.r_minute = 100;
            this.r_seconed = 120;
            // 定义表盘文字的半径
            this.r_text = 140;
            // 刻度
            this.r_square = 165;
            // 表盘圆点
            this.r_circle = 10;
            // 圆周
            this.deg = 2 * Math.PI;
            this.paintInstance = new Paint();
            this.init = function () { 
                // 漂移画布中心
                ctx.translate(this.w / 2, this.h /2)
                this.startPaint();
            };
            this.startPaint = function () {
                // 第一步：画圆盘和中心点
                this.paintInstance.drawCircle(0, 0, this.r, 0, this.deg);
                this.paintInstance.drawCircle(0, 0, this.r_circle, 0, this.deg);
                // 获取当前指针计
                // 第二步：画指针
                let date = new Date();
                let hourDeg = (this.deg / 12) * date.getHours() - this.deg / 4;
                let minuteDeg = (this.deg / 60) * date.getMinutes() - this.deg / 4;
                let secondeDeg = (this.deg / 60) * date.getSeconds() - this.deg / 4;
                this.paintInstance.drawLine(0, 0, this.r_hour * Math.cos(hourDeg),
                    this.r_hour * Math.sin(hourDeg), '#333', 10);
                this.paintInstance.drawLine(0, 0, this.r_minute * Math.cos(minuteDeg),
                    this.r_minute * Math.sin(minuteDeg), '#333', 6);
                this.paintInstance.drawLine(0, 0, this.r_seconed * Math.cos(secondeDeg),
                    this.r_seconed * Math.sin(secondeDeg), '#333', 4);
                // 第三步：画数字
                this.drawNum();
                // 第四步：画刻度
                this.drawScale();
            };
            this.drawNum = function () { 
                for(var i = 1; i <= 12; i++) {
                    var everyDeg = (this.deg / 12) * i - this.deg / 4;
                    this.paintInstance.drawText(i, this.r_text * Math.cos(everyDeg), this.r_text * Math.sin(everyDeg));
                }
            };
            this.drawScale = function () { 
                for(var i = 1; i <= 60; i++) {
                    var everyDeg = (this.deg / 60) * i - this.deg / 4;
                    // 判断正点
                    let x1 = this.r * Math.cos(everyDeg);
                    let y1 = this.r * Math.sin(everyDeg);
                    let x2 = this.r_square * Math.cos(everyDeg);
                    let y2 = this.r_square * Math.sin(everyDeg);
                    if (i % 5 == 0) {
                        this.paintInstance.drawLine(x1, y1, x2, y2, '#333', 5);
                    }
                    else {
                        this.paintInstance.drawLine(x1, y1, x2, y2, '#333', 3);
                    }
                    
                }
             }
         };

         // 实例化
         let clockInstance = new Clock();
         clockInstance.init();
         setInterval(function () {
            ctx.clearRect(- (clockInstance.w / 2), - (clockInstance.h / 2), clockInstance.w, clockInstance.h);
            clockInstance.startPaint();
        }, 1000)


    </script>    
</body>
</html>